@extends('layouts._app')
@section('content')
    <link rel="stylesheet" type="text/css" href="{{asset('static/webuploader/css/webuploader.css')}}"/>
    <link rel="stylesheet" type="text/css" href="{{asset('static/webuploader/css/style.css')}}"/>
    <style>
        #LAY_demo2 li img {
            width: 300px;
            height: 200px;
        }

        #LAY_demo2 li {
            float: left;
            padding: 5px;
            cursor: pointer;
        }

        #container {
            width: 49%;
            float: right;
        }


        #LAY_demo2 li span {
            display: -webkit-box;
            text-align: -webkit-center;
        }

        #name input {
            width: 30%;
            float: left;
            margin: 0 20px 0 0;
        }

        .model-search input {
            width: 30%;
            float: left;
            margin: 0 20px 0 0;
        }

        #name div {
            margin-bottom: 10px;
        }

    </style>
    <body class="iframe-h">
    <div class="email-write">
        @include('layouts._flash')
        {!! Form::open(['route' => 'expansion.email.update','method'=>'post']) !!}
        {!! Form::hidden('filter','true') !!}
        {!! Form::hidden('','',['id'=>'ext']) !!}
        {!! Form::hidden('','',['id'=>'search']) !!}
        <div class="layui-form-item">
            {!! Form::text('name','',['class'=>'layui-input','placeholder'=>'请输入收件人']) !!}
        </div>
        <div class="layui-form-item">
            {!! Form::text('title','',['placeholder'=>'请输入标题','class'=>'layui-input']) !!}
        </div>
        <div class="layui-form-item layui-form-text">
            {!!  Form::textarea('content','在此留下你想说的吧！！！',['class'=>'layui-textarea layui-hide','id'=>'LAY_demo_editor']) !!}
        </div>
        <div class="layui-form-item layui-form-text" id="file">
        </div>
        {!! Form::hidden('','admin',['id'=>'user']) !!}
        {!! Form::hidden('','email',['id'=>'category']) !!}

        <div id="button">
            <fieldset class="layui-elem-field site-demo-button">
                <legend>已有文件选择</legend>
                <div>
                    <button type="button" class="layui-btn layui-btn-normal" data-id=""
                            title="所有文件">所有文件
                    </button>
                    @if($name)
                        @foreach($name as $value)
                            <button type="button" class="layui-btn layui-btn-normal" data-id="{{$value['ext']}}"
                                    title="{{$value['ext']}}">{{$value['ext']}}</button>
                        @endforeach
                    @endif
                </div>
            </fieldset>
        </div>
        <div class="model-search">
            {!! Form::text('','',['placeholder'=>'请输入文件名','class'=>'layui-input']) !!}
            <button class="layui-btn layui-btn-danger" type="button" id="model-search">搜索</button>
        </div>
        <hr>
        <div id="name">
        </div>
    </div>
    <div class="layui-form-item">
        <div id="wrapper">
            <div id="container">
                <div id="uploader">
                    <div class="queueList">
                        <div id="dndArea" class="placeholder">
                            <div id="filePicker">或将文件拖到这里，单次最多可选300张</div>
                        </div>
                    </div>
                    <div class="statusBar" style="display:none;">
                        <div class="progress">
                            <span class="text">0%</span>
                            <span class="percentage"></span>
                        </div>
                        <div class="info"></div>
                        <div class="btns">
                            <div id="filePicker2"></div>
                            <div class="uploadBtn">开始上传</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="model-list">
            <ul class="flow-default" style="width: 50%;overflow:auto;height:-webkit-fill-available;"
                id="LAY_demo2">
            </ul>
        </div>
        <br>
        <div style="margin: 50px 0 0 30px;">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="formDemo">立即发送</button>
            <a href="{{route('expansion.email.index')}}" class="layui-btn layui-btn-primary">
                <i class="layui-icon">&#x1006;</i>放弃
            </a>
        </div>
        {!! Form::close() !!}
    </div>
    <script src="{{asset('static/admin/layui/layui.js')}}" type="text/javascript" charset="utf-8"></script>
    <script src="{{asset('js/jquery.min.js')}}" type="text/javascript" charset="utf-8"></script>
    <script src="{{asset('static/webuploader/js/webuploader.js')}}"></script>
    <script src="{{asset('static/webuploader/js/upload.js')}}"></script>
    <script>
        layui.config({
            base: '/static/admin/js/module/',
        }).extend({
            dialog: 'dialog',
        });
        layui.use('form', function () {
            var form = layui.form();
            form.on('submit(formDemo)', function (data) {
                $("#name div").each(function () {
                    $("#file").append("<input type='hidden' name='emailFile[]' value='" + $(this).data('id') + "'>");
                });
            });
        });

        layui.use(['jquery', 'flow', 'layer', 'dialog'], function () {
            var flow = layui.flow,
                layer = layui.layer,
                dialog = layui.dialog,
                $ = layui.jquery;
            flow.load({
                elem: '#LAY_demo2' //流加载容器
                , scrollElem: '#LAY_demo2'
                , isAuto: false
                , isLazyimg: true
                , done: function (page, next) { //加载下一页
                    setTimeout(function () {
                        $.ajax({
                            type: 'GET',
                            url: "{{route('expansion.email.picFile')}}",
                            data: {page: page, '_token': '{{ csrf_token() }}'},
                            dataType: "json",
                            beforeSend: function () {
                                layer.load(1, {
                                    shade: [0.1, '#333333'] //0.1透明度的白色背景
                                });
                            },
                            complete: function (XHR) {
                                XHR = null;
                            },
                            error: function (xhr) {//获取ajax的错误信息
                                layer.alert(xhr.responseText, "Failed", function () {
                                    layer.closeAll();
                                });
                            },
                            success: function (response) {
                                layer.closeAll();
                                if (response.code == 403) {
                                    layer.msg(response.msg, {icon: 4, time: 3000})
                                    return false;
                                }
                                if (response.code != 200) {
                                    layer.msg(response.msg, {icon: 5, time: 3000});
                                    return false;
                                }
                                var lis = [];
                                var list = response.data.data;
                                layui.each(list, function (index, item) {
                                    lis.push('<li data-id="' + item.id + '"><img lay-src="' + item.url + '"><span title="' + item.name + '">' + item.name + '</span></li>')
                                });
                                next(lis.join(''), page < response.data.last_page); //假设总页数为 6
                                var lay = $("#LAY_demo2 li");

                                lay.mouseenter(function () {
                                    $(this).find('.div').attr('style', 'display:block');
                                })

                                lay.mouseleave(function () {
                                    $(this).find('.div').attr('style', 'display:none');
                                })
                            }
                        })
                    });
                }
            });
            $(document).on('click', '#button button', function () {
                $('#ext').val($(this).data('id'));
                var name = $('#search').val();
                $("#LAY_demo2").remove();
                $(".model-list").append("<ul id='LAY_demo2' class='flow-default' style='width: 50%;overflow:auto;height:-webkit-fill-available;'></ul>");
                var ext = $(this).data('id');
                flow.load({
                    elem: '#LAY_demo2' //流加载容器
                    , scrollElem: '#LAY_demo2'
                    , isAuto: false
                    , isLazyimg: true
                    , done: function (page, next) { //加载下一页
                        setTimeout(function () {
                            $.ajax({
                                type: 'GET',
                                url: "{{route('expansion.email.picFile')}}",
                                data: {page: page, ext: ext, name: name, '_token': '{{ csrf_token() }}'},
                                dataType: "json",
                                beforeSend: function () {
                                    layer.load(1, {
                                        shade: [0.1, '#333333'] //0.1透明度的白色背景
                                    });
                                },
                                complete: function (XHR) {
                                    XHR = null;
                                },
                                error: function (xhr) {//获取ajax的错误信息
                                    layer.alert(xhr.responseText, "Failed", function () {
                                        layer.closeAll();
                                    });
                                },
                                success: function (response) {
                                    layer.closeAll();
                                    if (response.code == 403) {
                                        layer.msg(response.msg, {icon: 4, time: 3000})
                                        return false;
                                    }
                                    if (response.code != 200) {
                                        layer.msg(response.msg, {icon: 5, time: 3000});
                                        return false;
                                    }
                                    var lis = [];
                                    var list = response.data.data;
                                    layui.each(list, function (index, item) {
                                        lis.push('<li data-id="' + item.id + '"><img lay-src="' + item.url + '"><span title="' + item.name + '">' + item.name + '</span></li>')
                                    });
                                    next(lis.join(''), page < response.data.last_page); //假设总页数为 6
                                    var lay = $("#LAY_demo2 li");

                                    lay.mouseenter(function () {
                                        $(this).find('.div').attr('style', 'display:block');
                                    })

                                    lay.mouseleave(function () {
                                        $(this).find('.div').attr('style', 'display:none');
                                    })
                                }
                            })
                        });
                    }
                });
            });
            $(document).on('click', '#model-search', function () {
                var ext = $('#ext').val();
                var name = $(this).prev().val();
                $('#search').val(name);
                $("#LAY_demo2").remove();
                $(".model-list").append("<ul id='LAY_demo2' class='flow-default' style='width: 50%;overflow:auto;height:-webkit-fill-available;'></ul>");
                flow.load({
                    elem: '#LAY_demo2' //流加载容器
                    , scrollElem: '#LAY_demo2'
                    , isAuto: false
                    , isLazyimg: true
                    , done: function (page, next) { //加载下一页
                        setTimeout(function () {
                            $.ajax({
                                type: 'GET',
                                url: "{{route('expansion.email.picFile')}}",
                                data: {page: page, ext: ext, name: name, '_token': '{{ csrf_token() }}'},
                                dataType: "json",
                                beforeSend: function () {
                                    layer.load(1, {
                                        shade: [0.1, '#333333'] //0.1透明度的白色背景
                                    });
                                },
                                complete: function (XHR) {
                                    XHR = null;
                                },
                                error: function (xhr) {//获取ajax的错误信息
                                    layer.alert(xhr.responseText, "Failed", function () {
                                        layer.closeAll();
                                    });
                                },
                                success: function (response) {
                                    layer.closeAll();
                                    if (response.code == 403) {
                                        layer.msg(response.msg, {icon: 4, time: 3000})
                                        return false;
                                    }
                                    if (response.code != 200) {
                                        layer.msg(response.msg, {icon: 5, time: 3000});
                                        return false;
                                    }
                                    var lis = [];
                                    var list = response.data.data;
                                    layui.each(list, function (index, item) {
                                        lis.push('<li data-id="' + item.id + '"><img lay-src="' + item.url + '"><span title="' + item.name + '">' + item.name + '</span></li>')
                                    });
                                    next(lis.join(''), page < response.data.last_page); //假设总页数为 6
                                    var lay = $("#LAY_demo2 li");

                                    lay.mouseenter(function () {
                                        $(this).find('.div').attr('style', 'display:block');
                                    })

                                    lay.mouseleave(function () {
                                        $(this).find('.div').attr('style', 'display:none');
                                    })
                                }
                            })
                        });
                    }
                });
            });
            //回车键事件
            $(document).keyup(function () {
                if (event.keyCode == 13) {
                    $('#ext').val($(this).data('id'));
                    var name = $('#search').val();
                    $("#LAY_demo2").remove();
                    $(".model-list").append("<ul id='LAY_demo2' class='flow-default' style='width: 50%;overflow:auto;height:-webkit-fill-available;'></ul>");
                    var ext = $(this).data('id');
                    flow.load({
                        elem: '#LAY_demo2' //流加载容器
                        , scrollElem: '#LAY_demo2'
                        , isAuto: false
                        , isLazyimg: true
                        , done: function (page, next) { //加载下一页
                            setTimeout(function () {
                                $.ajax({
                                    type: 'GET',
                                    url: "{{route('expansion.email.picFile')}}",
                                    data: {page: page, ext: ext, name: name, '_token': '{{ csrf_token() }}'},
                                    dataType: "json",
                                    beforeSend: function () {
                                        layer.load(1, {
                                            shade: [0.1, '#333333'] //0.1透明度的白色背景
                                        });
                                    },
                                    complete: function (XHR) {
                                        XHR = null;
                                    },
                                    error: function (xhr) {//获取ajax的错误信息
                                        layer.alert(xhr.responseText, "Failed", function () {
                                            layer.closeAll();
                                        });
                                    },
                                    success: function (response) {
                                        layer.closeAll();
                                        if (response.code == 403) {
                                            layer.msg(response.msg, {icon: 4, time: 3000})
                                            return false;
                                        }
                                        if (response.code != 200) {
                                            layer.msg(response.msg, {icon: 5, time: 3000});
                                            return false;
                                        }
                                        var lis = [];
                                        var list = response.data.data;
                                        layui.each(list, function (index, item) {
                                            lis.push('<li data-id="' + item.id + '"><img lay-src="' + item.url + '"><span title="' + item.name + '">' + item.name + '</span></li>')
                                        });
                                        next(lis.join(''), page < response.data.last_page); //假设总页数为 6
                                        var lay = $("#LAY_demo2 li");

                                        lay.mouseenter(function () {
                                            $(this).find('.div').attr('style', 'display:block');
                                        })

                                        lay.mouseleave(function () {
                                            $(this).find('.div').attr('style', 'display:none');
                                        })
                                    }
                                })
                            });
                        }
                    });
                    return false;
                }
            });
        });
        $(document).on('click', '#LAY_demo2 li', function () {
            var id = $(this).data('id');
            var value = $(this).find('span').text();
            var html = '<div id="value_' + id + '" data-id="' + id + '">' +
                '<input id="buy" class="layui-input" readonly="" type="text" value="' + value + '">' +
                '<button class="layui-btn layui-btn-danger" type="button" data-id="' + id + '" id="del_' + id + '">删除</button></div>';
            $("#name").append(html);
        })

        $(document).on('click', '#name button', function () {
            var id = $(this).data('id');
            $(this).parents('#value_' + id + '').remove();
        })

        layui.use(['layedit'], function () {
            var layedit = layui.layedit;
            var token = $('meta[name="csrf-token"]').attr('content');

            layedit.set({
                uploadImage: {
                    url: '{{route('upload')}}?category=email&user=admin&get=file&post=ajax&_token=' + token //接口url
                },
                tool: [
                    'code'
                    , 'strong' //加粗
                    , 'italic' //斜体
                    , 'underline' //下划线
                    , 'del' //删除线

                    , '|' //分割线

                    , 'left' //左对齐
                    , 'center' //居中对齐
                    , 'right' //右对齐
                    , 'link' //超链接
                    , 'unlink' //清除链接
                    , 'face' //表情
                    , 'image' //插入图片
                ]
            });
            //创建一个编辑器
            var editIndex = layedit.build('LAY_demo_editor');
        });
    </script>
    </body>
@endsection
